<template>
  <div class="content">
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">入库管理</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><div class="div1">待审核退货</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><div class="div2">订单详情</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="orderType">
      <div class="head">订单状态: {{ type[data.type] }}</div>
      <div class="context">
        <div class="top">
          <span>下单时间: {{ "2020-05-06 14:25:22" }}</span>
          <span>发货时间: {{ "2020-05-06 17:25:22" }}</span>
          <span>签收时间: {{ "无" }}</span>
        </div>
        <div class="middle">
          <span>物流信息: </span>
          <span style="color:#4A90E4;">{{
            "商品已由广州分部发出，下一站，苏州分部。"
          }}</span>
          <span style="width:300px;min-width:200px;padding-left:40px;">{{
            "2020-05-07 09:14:00"
          }}</span>
        </div>
      </div>
    </div>
    <div class="orderType">
      <div class="head">收货人信息</div>
      <div class="context">
        <div class="top">
          <span>收货人姓名: {{ "张仲元" }}</span>
          <span>联系电话: {{ 15290889088 }}</span>
          <span>收货地区: {{ "北京-宣武区" }}</span>
        </div>
        <div class="middle">
          <span>详细地址: {{ "北京宣武区北纬路甲一号" }}</span>
        </div>
        <div class="bottom">
          <span>备注: {{ "无" }}</span>
        </div>
      </div>
    </div>

    <div>
      <div class="returnGoods">
        <div class="head"><span>退货商品</span></div>
        <div class="tableHead">
          <el-row :gutter="20">
            <el-col :span="12"
              ><div
                style="color: #2d7edf;
font-weight: 400;"
              >
                <span>商品名称</span>
              </div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content"><span>商品数量</span></div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content"><span>商品单价</span></div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content"><span>商品规格</span></div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content"><span>商品小计</span></div></el-col
            >
          </el-row>
        </div>
      </div>
      <div class="returnGood" v-for="(item, index) in data.goods">
        <el-row :gutter="20">
          <el-col :span="12"
            ><div>
              <span>
                {{ item.name }}
              </span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content" style="padding-right:40px;">
              <span>
                {{ item.count }}
              </span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content" style="padding-right:20px;">
              <span> {{ item.price }}元 </span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content">
              <span>{{ item.specification }}g/盒</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content" style="padding-right:30px;">
              <span>
                {{ item.subtotal }}
              </span>
            </div></el-col
          >
        </el-row>
      </div>
      <div class="total" style="margin-bottom:10px;">
        <div class="context">
          <span>总计: 共{{ data.goods.length }}件</span>
          <span>运费: {{ 0 }}</span>
          <span>总价: {{ totalPrice }}</span>
        </div>
      </div>
    </div>
    <div v-if="data.typeNum === 2">
      <div class="returnGoods">
        <div class="head"><span>实际退回商品</span></div>
        <div class="tableHead">
          <el-row :gutter="20">
            <el-col :span="12"
              ><div
                style="color: #2d7edf;
font-weight: 400;"
              >
                <span>商品名称</span>
              </div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content"><span>商品数量</span></div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content"><span>商品单价</span></div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content"><span>商品规格</span></div></el-col
            >
            <el-col :span="3"
              ><div class="grid-content"><span>商品小计</span></div></el-col
            >
          </el-row>
        </div>
      </div>
      <div class="returnGood" v-for="(item, index) in data.goods">
        <el-row :gutter="20">
          <el-col :span="12"
            ><div>
              <span>
                {{ item.name }}
              </span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content" style="padding-right:40px;">
              <span>
                {{ item.count }}
              </span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content" style="padding-right:20px;">
              <span> {{ item.price }}元 </span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content">
              <span>{{ item.specification }}g/盒</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content" style="padding-right:30px;">
              <span>
                {{ item.subtotal }}
              </span>
            </div></el-col
          >
        </el-row>
      </div>

      <div class="total">
        <div class="context">
          <span>总计: 共{{ data.goods.length }}件</span>
          <span>运费: {{ 0 }}</span>
          <span>总价: {{ totalPrice }}</span>
        </div>
      </div>
    </div>

    <div class="operation">
      <div class="context">
        <button class="button" v-if="!data.typeNum">同意退货</button>
        <button class="button" v-if="!data.typeNum" @click="dowith = true">
          驳回
        </button>
        <button class="button" v-if="data.typeNum == 1" @click="dowith = true">
          确认收货
        </button>
        <button class="button" v-if="data.typeNum == 2" @click="dowith = true">
          提交财务
        </button>
      </div>
    </div>
    <div class="record">
      <div class="nav">
        <div
          class="text"
          :style="
            activeIndex == 1
              ? 'border-bottom: 2px solid #2d7edf;color: #2d7edf;'
              : ''
          "
          @click="activeUpdate(1)"
        >
          <span>订单修改记录</span>
        </div>
        <div
          class="text"
          :style="
            activeIndex == 2
              ? 'border-bottom: 2px solid #2d7edf;color: #2d7edf;'
              : ''
          "
          @click="activeUpdate(2)"
        >
          <span>物流记录</span>
        </div>
      </div>

      <div class="tableHead">
        <el-row :gutter="20">
          <el-col :span="9"
            ><div
              style="color: #2d7edf;
font-weight: 400;"
            >
              <span>修改记录</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content"><span>记录人员</span></div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content"><span>进度时间</span></div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content"><span>审核人员</span></div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content"><span>审核时间</span></div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content"><span>审核状态</span></div></el-col
          >
        </el-row>
      </div>
    </div>
    <div class="recordContext">
      <div class="tableHead">
        <el-row :gutter="20">
          <el-col :span="9"
            ><div>
              <span>{{ "老班章古树纯料普洱茶换成珍藏品品普洱" }}</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content">
              <span>{{ "小铃铛" }}</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div
              class="grid-content"
              style="flex-direction: column;
        align-items: center;"
            >
              <span>{{ "2020/05/06" }}</span
              ><span>{{ "14:25:06" }}</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div
              class="grid-content"
              style="flex-direction: column;
        align-items: center;"
            >
              <span>{{ "经理" }}</span
              ><span>{{ "文员" }}</span
              ><span>{{ "物流" }}</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div
              class="grid-content"
              style="flex-direction: column;
        align-items: center;"
            >
              <span>{{ "2020/05/06" }}</span
              ><span>{{ "14:25:06" }}</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div
              class="grid-content"
              style="flex-direction: column;
        align-items: center;"
            >
              <span>{{ "已通过" }}</span
              ><span>{{ "已通过" }}</span
              ><span>{{ "待审核" }}</span>
            </div></el-col
          >
        </el-row>
      </div>
    </div>
    <el-dialog
      v-if="data.typeNum == 1"
      :visible.sync="dowith"
      :append-to-body="true"
      class="twoDialog"
      :show-close="false"
      width="70%"
    >
      <div class="title">待收货商品</div>
      <div class="tableHead">
        <el-row :gutter="20">
          <el-col :span="9"
            ><div
              style="color: #2d7edf;
font-weight: 400;"
            >
              <span>修改记录</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content"><span>记录人员</span></div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content"><span>进度时间</span></div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content"><span>审核人员</span></div></el-col
          >
          <el-col :span="4"
            ><div class="grid-content"><span>审核时间</span></div></el-col
          >
        </el-row>
      </div>
      <div class="tableHead" v-for="(item, index) in data.goods" :key="index">
        <el-row :gutter="20" style="display:flex;align-items:center;">
          <el-col :span="9"
            ><div
              style="color: #676767;
font-weight: 400;"
            >
              <span>{{ item.name }}</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div
              class="grid-content"
              style="color:#676767;padding-right:20px;"
            >
              <span>{{ item.price }}元</span>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content" style="color:#676767;padding-right:5px;">
              <span>{{ item.specification }}g/盒</span>
            </div></el-col
          >
          <el-col :span="4"
            ><div class="grid-content" style="color:#676767;">
              <el-input-number
                v-model="item.count"
                :min="0"
                size="mini"
              ></el-input-number></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content" style="color:#676767;">
              <el-select size="mini" v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select></div
          ></el-col>
        </el-row>
      </div>
      <div style="color:#2d7edf;position: absolute;right:50px;margin-top:10px;">
        <span style="margin-right:10px;"
          >总共: 共{{ data.goods.length }}件</span
        >
        <span style="margin-left:10px;margin-right: 20px;">运费: {{ 0 }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- 经理审批 组长提交 ； 组长批准直接到物流-->
        <!-- <el-button type="primary" v-if='activeName!=6 && activeName!=5'  @click="dowith = false;approval('经理审批')">经理审批</el-button> -->
        <button class="button" @click="dowith = false">
          确认收货
        </button>
        <button class="button" @click="dowith = false">异常审核</button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="!data.typeNum"
      :visible.sync="dowith"
      :append-to-body="true"
    >
      <span style="display: inline-block;line-height: 30px;"
        >请填写驳回原因:</span
      >
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
      ></el-input>
      <div slot="footer" class="dialog-footer">
        <!-- 经理审批 组长提交 ； 组长批准直接到物流-->
        <!-- <el-button type="primary" v-if='activeName!=6 && activeName!=5'  @click="dowith = false;approval('经理审批')">经理审批</el-button> -->
        <el-button type="primary" @click="dowith = false">确 认</el-button>
        <el-button @click="dowith = false">取 消</el-button>
      </div>
    </el-dialog>
    <div style="height:50px;"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: this.$route.params,
      type: ["运输中", "已签收"],
      activeIndex: "1",
      dowith: false,
      textarea: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  created() {},
  methods: {
    activeUpdate(e) {
      this.activeIndex = e;
    },
  },
  computed: {
    totalPrice() {
      let count = 0;
      this.data.goods.forEach((v) => {
        count += v.price * v.count;
      });
      return count;
    },
  },
};
</script>
<style lang="scss" scoped>
.twoDialog {
  padding-top: -20px;
  /deep/.el-dialog__header {
    padding: 0;
  }
  .title {
    color: #2d7edf;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    padding: 5px 0px;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  .tableHead {
    background: #fff;
    margin-top: 10px;
    .grid-content {
      display: flex;
      justify-content: center;
      color: #2d7edf;
      font-weight: 400;
    }
  }
}

.button {
  width: 60px;
  min-width: 55px;
  display: flex;
  margin-right: 30px;
  justify-content: center;
  align-items: center;
  height: 30px;
  border: 0;
  border-radius: 2px;
  background: #2d7edf;
  white-space: normal;
  color: #fff;
  outline: none;
  cursor: pointer;
  font-size: 12px;
}
.button:hover {
  background: #639ce7;
}
span {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
}
.content {
  font-size: 14px !important;

  .div1 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb2.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #2d7edf;
  }
  .div2 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb1.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }
  .orderType {
    background: #fff;
    padding: 10px 20px;
    margin-bottom: 20px;
    .head {
      border-bottom: 1px solid #eee;
      height: 30px;
      color: #488de1;
    }
    .context {
      display: flex;
      line-height: 40px;
      flex-direction: column;
      .top {
        display: flex;
        padding-left: 70px;
        span {
          width: 300px;
          min-width: 200px;
        }
      }
      .middle {
        padding-left: 70px;
      }
      .bottom {
        padding-left: 70px;
      }
    }
  }
  .returnGoods {
    background: #fff;
    padding: 10px 20px;
    .head {
      border-bottom: 1px solid #eee;
      height: 30px;
      color: #488de1;
    }
    .tableHead {
      background: #fff;
      margin-top: 10px;
      .grid-content {
        display: flex;
        justify-content: center;
        color: #2d7edf;
        font-weight: 400;
      }
    }
  }
  .returnGood {
    background: #fff;
    padding: 10px 20px;
    margin-bottom: 3px;
    .grid-content {
      text-align: center;
      padding-right: 10px;
    }
  }
  .total {
    background: #fff;
    padding: 10px 20px;
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    .context {
      color: #488de1;
      width: 300px;
      display: flex;
      justify-content: space-between;
      margin-right: 20px;
    }
  }
  .operation {
    background: #fff;
    padding: 10px 20px;
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    .context {
      color: #488de1;
      display: flex;
      justify-content: space-between;
    }
  }
  .record {
    background: #fff;
    padding: 10px 20px;
    margin-top: 10px;
    .nav {
      border-bottom: 1px solid #eee;
      display: flex;
      .text {
        margin-right: 40px;
        line-height: 40px;
        cursor: pointer;
      }
    }
    .tableHead {
      background: #fff;
      margin-top: 10px;
      .grid-content {
        display: flex;
        justify-content: center;
        color: #2d7edf;
        font-weight: 400;
      }
    }
  }

  .recordContext {
    background: #fff;
    padding: 10px 20px;
    margin-top: 10px;
    .grid-content {
      display: flex;
      justify-content: center;
      font-weight: 400;
    }
  }
}
</style>
